<!DOCTYPE html>
<html>
<head>
    <title>Canvas Progress Bar</title>
    <style>
        .wrap {
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #f0ad4e;
        }

        canvas {
            display: block;
            /*background-color: #c6f3d7;*/
        }
    </style>
</head>
<body>
<div class="wrap">
    <canvas id="myCanvas" width="290" height="370"></canvas>
</div>

<script>

  function drawRoundedRect(ctx, x, y, width, height, radius) {
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.strokeStyle = "#339CFF";
    ctx.lineWidth = 4;
    ctx.lineTo(x + width - radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.stroke();
    ctx.arcTo(x + width, y, x + width, y + radius, radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
    ctx.lineTo(x + radius, y + height);
    ctx.arcTo(x, y + height, x, y + height - radius, radius);
    ctx.lineTo(x, y + radius);
    ctx.arcTo(x, y, x + radius, y, radius);
    ctx.stroke();

  }

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.strokeStyle = "#339CFF";
  ctx.lineWidth = 8;
  // ctx.beginPath(); // 开始新的路径
  // ctx.moveTo(50, 50); // 设置起点坐标
  // ctx.lineTo(100, 50); // 设置终点坐标
  // ctx.stroke(); // 绘制线条

  // drawRoundedRect(ctx, 0, 0, 290, 370, 10);

  let width = 290
  let height = 370
  let one = (width+height)*2/100

  let x = width/2
  let y = 0

  ctx.beginPath();
  function drawProcess(process) {

    ctx.moveTo(x, y)

    if(x<width) {

     x=x+ one * process
    }
    if(x>=width) {

        y =  y + one * process
    }
    ctx.lineTo(x, y)
    ctx.stroke(); // 绘制线条
  }

  var process = 0
  var si = setInterval(()=>{
    drawProcess(process)
    process+=0.1
    if(process>=100) {
      clearInterval(si)
    }
  },10)
</script>

</body>
</html>
